<template>
  <div class="app-container">
    <el-form >
      <el-form-item>
        <el-button type="primary" icon="Upload" @click="onAddSdk">发布SDK</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      border
    >
      <el-table-column
        prop="name"
        label="SDK"
        width="120"
      />
      <el-table-column
        prop="version"
        label="版本"
        width="120"
      />
      <el-table-column
        prop="content"
        label="下载地址"
      >
        <template #default="scope">
          <el-link type="primary" :href="scope.row.content" target="_blank">{{ scope.row.content }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
        align="center"
      >
        <template #default="scope">
          <el-button type="link" text  @click="onSdkUpdate(scope.row)">编辑</el-button>
          <el-button type="link" text  @click="onSdkDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--dialog-->
    <el-dialog
      :title="sdkDlgTitle"
      v-model="sdkDlgAddShow"
      :close-on-click-modal="false"
      @close="resetForm(sdkAddForm)"
    >
      <el-form
        ref="sdkAddForm"
        :model="sdkFormAddData"
        :rules="sdkFormRule"
        label-width="100px"
      >
        <el-form-item prop="name" label="选择语言">
          <el-select
            v-model="sdkFormAddData.name"
            placeholder="请选择"
          >
            <el-option
              v-for="item in sdkConfigs"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="version" label="版本">
          <el-input v-model="sdkFormAddData.version" maxlength="30" show-word-limit placeholder="如：1.0" />
        </el-form-item>
        <el-form-item prop="content" label="下载地址">
          <el-input v-model="sdkFormAddData.content" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item prop="extContent" label="调用示例">
          <el-input v-model="sdkFormAddData.extContent" type="textarea" :rows="12" placeholder="填写SDK调用示例代码，支持markdown语法" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sdkDlgAddShow = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitForm">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import request from '@/utils/request'
import {useMessage,useMessageBox} from '@/hooks/message'
const searchFormData=reactive({})
const sdkDownloadConfig=reactive([])
const sdkConfigs=reactive([])
const sdkDlgTitle=ref('')
const sdkDlgAddShow=ref(false)
const sdkAddForm=ref()
const sdkFormUpdateData=reactive({
    id: 0,
    name: '',
    version: '',
    content: '',
    extContent: ''
  })
const sdkFormAddData=reactive({
    id: 0,
    name: '',
    version: '',
    content: '',
    extContent: ''
  })
const sdkFormLoading=ref(false)
const sdkFormRule=reactive({
        name: [
          { required: true, message: '请选择语言', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '请填版本', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填写URL', trigger: 'blur' }
        ],
        extContent: [
          { required: true, message: '请填写调用示例', trigger: 'blur' }
        ]
      })
const downloadUrl=ref('')
const list=ref([])

const loadLangSelector=async()=> {
      //await request getFile(`static/sdkConfig.json?q=${new Date().getTime()}`);
      //sdkConfigs = content.langList
    }
const loadTable=async () => {
      const resp= await request('/api/isp/sdk/list', searchFormData)
      list.value = resp.data
    }
const onSizeChange=function(size) {
      searchFormData.pageSize = size
      loadTable()
    }
const onPageIndexChange=function(pageIndex) {
      searchFormData.pageIndex = pageIndex
      loadTable()
    }
const onAddSdk=function() {
      sdkDlgTitle.value = '添加SDK'
      //sdkFormAddData = appFormDataInit()
      sdkDlgAddShow.value = true
    }
const onSdkUpdate=(row)=> {
      sdkDlgTitle.value = '修改SDK'
      Object.assign(sdkFormAddData, row)
      sdkDlgAddShow.value = true
    }
const onSdkDelete=function(row) {
      useMessageBox().confirm(`确认要删除【${row.name}】吗？`).then(async()=>{
        const resp=await request('isp.sdk.delete', { id: row.id })
        useMessage().success('删除成功')
        loadTable()
      })
    }
const onSubmitForm=()=>{
      sdkAddForm.value.validate(async(valid) => {
        if (valid) {
          const uri = sdkFormAddData.id ? 'isp.sdk.update' : 'isp.sdk.add'
          await request(uri, sdkFormAddData)
          sdkDlgAddShow.value = false
          loadTable()
        }
      })
    }
const resetForm=(formEl)=>{
  if(!formEl){
    return;
  }
  formEl.resetFields();
}
//console.log(loadLangSelector);
// Lifecycle
onMounted(()=>{
  loadLangSelector()
  loadTable()
})
</script>
